<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="../taglib.jsp" %>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>千寻-扫雷</title>

    <script src="${path}/assets/js/jquery.min.js"></script>

</head>
<style>
    html,body{
        transform-style:preserve-3d;
        background: linear-gradient(to bottom,blue,#fff);
        overflow: hidden;
        background: url(${path}/game/img/bg.jpg) no-repeat;
    }
    .box{
        transform:perspective(800px) rotatex(45deg);
        width: 500px;
        height:500px;
        margin: 20px auto;
        border-top: 1px solid #B25F27;
        border-left: 1px solid #B25F27;
        box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
    }
    .block{
        width: 49px;
        height: 49px;
        border-right:1px solid #B25F27;
        border-bottom:1px solid #B25F27;
        float: left;
        box-shadow: 0 0 4px #333 inset;  /*内阴影*/
        background:  url(${path}/game/img/cao.jpg);

    }
    .show{
        background:url(${path}/game/img/dilei.jpg) no-repeat;
    }
    .num{
        background: #ECD0A1;
        font-size: 18px;
        /*color: #fff;*/
        font-weight: bold;
        text-align: center;
        line-height: 49px;
    }
    .time{
        width: 50px;
        height: 50px;
        border: 1px solid red;
        text-align: center;
        line-height: 50px;
        font-size: 20px;
        font-weight: bold;
        font-family: "微软雅黑";
        position: absolute;
        right: 20px;
        top: 50px;
        background: url(${path}/game/img/shizhong.jpg) no-repeat;
        color: #fff;
        margin-top: 50px;
        margin-right: 250px;
    }
    .flagbox{
        width: 40px;
        height: 40px;
        padding: 5px;
        background: url(${path}/game/img/hongqi.jpg) no-repeat;
        border: 1px solid red;
        position: absolute;
        right: 20px;
        top: 120px;
        text-align:center;
        line-height: 50px;
        font-size: 20px;
        font-weight: bold;
        font-family: "微软雅黑";
        margin-top: 50px;
        margin-right: 250px;
    }

    .flag{
        background: url(${path}/game/img/hongqi.jpg) no-repeat;
    }
</style>

<body>
<div class="box"></div>
<div class="flagbox">10</div>
<div class="time">100</div>


<script>
    $(function(){
        do{
            //用两个循环创建100个块，并且随机产生10个加一个雷的类名
            //给每个块添加位置数据 和 id属性 鼠标按下事件
            $(".box").empty();
            for(var i=0;i<10;i++){
                for(var j=0;j<10;j++){
                    var islei=Math.random()>0.9;
                    $("<div></div>").addClass(function(){
                        return "block"+(islei? " lei":"");
                    }).data("pos",{x:i,y:j}).attr("id",i+"-"+j).mousedown(mousedownhandler).appendTo(".box");
                }
            }
        }while($(".lei").length!=10);
        $(document).on("contextmenu",false);  //右击浏览器弹出窗口事件 被 contextmenu事件冲掉
        function mousedownhandler(e){
            e.preventDefault();
            if(e.which==1){                   //区分左击和右击事件
                leftclick.call(this);		  //将this指针保存到leftclick上
            }else if(e.which==3){
                rightclick.call(this);        // 将this指针保存到rightclick上
            }
        }
        function leftclick(){
            if($(this).hasClass("flag")){       //右击后不能左击
                return;
            }
            if($(this).hasClass("lei")){
                alert("Game Over!");             //左击点到雷  游戏结束
                // $(".block").filter(":not(lei)").addClass("num");
                $(".lei").addClass("show");      //所有的雷显示
            }else{
                var n=0;						 //如果点到的不是雷，显示出他旁边雷的个数
                var pos=$(this).data("pos");
                // console.log(pos.x);
                $(this).addClass("num");
                for(var i=pos.x-1;i<=pos.x+1;i++){
                    for(var j=pos.y-1;j<=pos.y+1;j++){
                        if($("#"+i+"-"+j).hasClass("lei")){
                            n++;
                        }
                    }
                }
                $(this).text(n);
                if(n==0){
                    for(var i=pos.x-1;i<=pos.x+1;i++){
                        for(var j=pos.y-1;j<=pos.y+1;j++){
                            if($("#"+i+"-"+j).length!=0){
                                if(!$("#"+i+"-"+j).data("check")){
                                    $("#"+i+"-"+j).data("check",true);
                                    leftclick.call($("#"+i+"-"+j)[0]);
                                }
                            }
                        }
                    }
                }
            }
        }
        function rightclick(){
            if($(this).hasClass("num")){     //有数字的不能够再次右击
                return;
            }
            if($(this).hasClass("flag")){
                $(".flagbox").text(function(index,num){
                    num=parseInt(num);
                    return ++num;
                })
            }else{
                if($(".flag").length==10){
                    return;
                }
                $(".flagbox").text(function(index,num){
                    num=parseInt(num);
                    return --num;
                })
            }
            $(this).toggleClass("flag");     //右击切换flag类名
            if($(".flag").filter(".lei").length==10){
                alert("Success!");
                clearInterval(t);
                return false;
            }

        }
        t=setInterval(function(){        //计时器
            $(".time").text(function(index,n){
                return --n;
            })
            if($(".time").text()==0){
                clearInterval(t);
                alert("时间到，游戏结束！");
            }
        },1000)
    })
</script>
</body>
</html>